<template>
  <div class="right">
    <ButtonEr @change="isPower" :value="power">power</ButtonEr>
    <div class="title">{{ text }}</div>
    <div class="volume">
      <p><span @mousedown="mousedown"></span></p>
    </div>
    <ButtonEr @change="isBank" :value="bank">bank</ButtonEr>
  </div>
</template>

<script>
import ButtonEr from './ButtonEr.vue' // 引入按钮组件

export default {
  data () {
    return {
      text: '', // 显示的文本信息
      move: false // 是否允许拖动滑块
    }
  },
  props: ['curIndex', 'power', 'bank', 'curData'],
  components: {
    ButtonEr
  },
  methods: {
    isPower (bol) {
      this.$emit('update:power', bol)
      if (!bol) this.text = ''
    },
    isBank (bol) {
      this.$emit('update:bank', bol)
    },
    mousedown (e) {
      // 允许拖动
      this.move = true
      // 记录位置
      this.el = e.target
      this.x = e.offsetX
      this.w = this.el.offsetWidth
      this.max = this.el.parentNode.parentNode.offsetWidth
      this.l = this.el.parentNode.offsetLeft
    },
    mousemove (e) {
      // 如果允许拖动
      if (this.move) {
        let l = e.pageX - this.l - this.x + this.w / 2
        l = Math.max(0, Math.min(this.max, l))
        this.el.parentNode.style.width = l + 'px'
        this.$emit('update:volume', l / this.max)
      }
    },
    mouseup () {
      // 停止拖动
      this.move = false
    }
  },
  watch: {
    curData () {
      if (this.curData) {
        this.text = this.curData.id
      }
    }
  },
  created () {
    document.addEventListener('mousemove', this.mousemove)
    document.addEventListener('mouseup', this.mouseup)
  },
  beforeDestroy () {
    document.removeEventListener('mousemove', this.mousemove)
    document.removeEventListener('mouseup', this.mouseup)
  }
}
</script>

<style lang="scss" scoped>
.right {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;

  span {
    width: 100px;
    height: 40px;
    text-align: center;
    background: #000;
  }
}

.title {
  background: #999;
  width: 250px;
  height: 80px;
  border-radius: 4px;
  line-height: 80px;
  text-align: center;
  box-shadow: inset 4px 4px 3px rgba($color: #000000, $alpha: 0.4);
}

.volume {
  width: 300px;
  height: 10px;
  background: #000;
  border-radius: 4px;

  p {
    width: 0;
    height: 10px;
    background: tomato;
    position: relative;
    border-radius: 4px;
  }

  span {
    width: 10px;
    height: 30px;
    background: #24acf2;
    position: absolute;
    top: -10px;
    right: -5px;
    border-radius: 4px;
    // cursor: grab;
    box-shadow: 0 0 3px rgba($color: #000000, $alpha: 0.4);

    &:active {
      // cursor: grabbing;
      background: #1c99d8;
    }
  }
}
</style>
